import React from 'react';
import {
  AppRegistry,
  Text,
  View,
  Button,
} from 'react-native';
import { StackNavigator } from 'react-navigation';



//第一个页面
class HomeScreen extends React.Component {
  render() {
  	const { navigate } = this.props.navigation;
  	// navigate 是什么鬼 就是下面的这块代码 可见 navigate 是个function对象 参数一 是要跳转的页面名字 例如：Chat 参数2:要传递的参数 参数3: 一般不用
  	// function navigate(routeName, params, action) {
   //    return navigation.dispatch(_NavigationActions2.default.navigate({
   //      routeName: routeName,
   //      params: params,
   //      action: action
   //    }));
  	console.log(navigate);
    return (
    	<View>
            <Text>Hello, Navigation!</Text>
            <Text></Text>
           <Button
              //点击跳转到界面二，并传递参数 { user: 'Lucy' }
              onPress={() => navigate('Chat', { user: 'Lucy' })}
              title="去 ChatScreen界面"
           />
           <Text></Text>
    	</View>
    );
  }
}

// 这样也是可以
HomeScreen.navigationOptions = {
  	//标题
    title: 'FirstScreen',
     //是否允许右滑返回，在iOS上默认为true，在Android上默认为false
    cardStack: {
            gesturesEnabled: true,
    },

 };

// 第二个页面
class ChatScreen extends React.Component {

  static navigationOptions = ({navigation}) => ({
  	// 展示数据 "`" 不是单引号 
    title: `Chat with ${navigation.state.params.user}`,
    
  });

  render() {

  	// The screen's current route is passed in to `props.navigation.state`: 传过来的对象：{ user: 'Lucy' }
    const { params } = this.props.navigation.state;
    console.log(this.props.navigation);
    //object {state: Object, dispatch: function, goBack: function, navigate: function, setParams: function}
    console.log(this.props.navigation.state);
    //Object {params: Object, key: "id-1498014888408-1", routeName: "Chat"}
    console.log("-----------params----------->");
    console.log(params);
    //打印结果{user: "Lucy"}
    return (
      <View>
        <Text>Chat with {params.user}</Text>
      </View>
    );
  }
}

ChatScreen.navigationOptions = ({navigation}) => {
	console.log("---------navigation------------>");
    console.log(navigation);
    //Object {state: Object, dispatch: function, goBack: function, navigate: function, setParams: function}
	return {
         // 展示数据 "`" 不是单引号 
         title: `Chat with ${navigation.state.params.user}`,
         // 导航栏的标题, 可以是字符串也可以是个组件 会覆盖 title 的值 
         // headerTitle : '返回',
         //右边按钮
         headerRight:(  
         	<View>
                <Button  
                   title="点我" 
                   onPress={() => alert("hello")}  
                />  
         	</View>   
        ),
         //左上角的返回键文字, 默认是上一个页面的title  IOS 有效
         headerBackTitle : "返回",
            //导航栏的style
         headerStyle: {
                backgroundColor: '#fff'
            },
            //导航栏的title的style
         headerTitleStyle: {
                color: 'green',
                //居中显示
                alignSelf : 'center',
         },
         //按压返回按钮显示的颜色 API > 5.0 有效
         headerPressColorAndroid : 'blue',
         //返回按钮的颜色
         headerTintColor : 'red',
         //是否允许右滑返回，在iOS上默认为true，在Android上默认为false
         gesturesEnabled: true,
	};
  	   
};


// MyFirstProject 是你的react native 项目名  注意： 这块代码要放置到HomeScreen，ChatScreen...的下面否则会出错：Home不存在。
const MyFirstProject = StackNavigator({
  Home: { screen: HomeScreen },
  Chat: { screen: ChatScreen },
  // navigationOptions: {}  // 此处设置了, 会覆盖组件内的`static navigationOptions`设置. 
},{
	initialRouteName: 'Home', // 默认显示界面
    onTransitionStart: ()=>{ console.log('导航栏切换开始'); },  // 回调
    onTransitionEnd: ()=>{ console.log('导航栏切换结束'); },  // 回调
});

AppRegistry.registerComponent('MyFirstProject', () => MyFirstProject);


